import React from "react";
import * as S from "./style";
import useProducts from "/src/contexts/products-context/useProducts";
export const availableSizes = ["XS", "S", "M", "ML", "L", "XL", "XXL"];
const Filter = () => {
  const { filters, filterProducts } = useProducts();
  const selectedCheckboxes = new Set(filters);
  const toogleCheckbox = (label) => {
    if (selectedCheckboxes.has(label)) selectedCheckboxes.delete(label);
    else selectedCheckboxes.add(label);

    const newFilters = [...selectedCheckboxes];
    filterProducts(newFilters);
  };
  return (
    <S.Container>
      <S.Title>Sizes:</S.Title>
      {availableSizes.map((label) => (
        <S.Checkbox key={label} label={label} handleOnChange={toogleCheckbox} />
      ))}
    </S.Container>
  );
};

export default Filter;
